App.require(function () {
    var app = App.getCurrent();

    app.definePage("previewSceneSelect", {
        getDomObj: function () {
            this.attachDom(".btn-group", "btnGroup")
                .attachDom(".popup-scene-list", "list")
                .attachDom("#viewer", "viewer")
                .attachEvent("list", "click", this.clickSceneListHandler, false)
                .attachEvent("btnGroup", "btnclick", this.btnClickHandler, false);
        },
        clickSceneListHandler: function (ev) {
            var div = Component.getNodeName(ev.target, "DIV");
            var id = div.dataset.id;
            if (id) {
                var index = this.data.selectId.indexOf(id)
                if (index !== -1) this.data.selectId.splice(index, 1);
                else this.data.selectId.push(id);
            }
            var scenes = this.getSelectScenes();
            this.domList.sceneViewer.previewScene(scenes, app.wm, app.wbm);
        }, 
        getSelectScenes: function () {
            var ids = this.data.selectId, scenes = [];
            for (var i = 0; i < ids.length; i++) {
                var scene = this.getSceneByUid(ids[i]);
                scenes.push(scene);
            }
            return scenes;
        }, 
        getSceneByUid: function (id) {
            var scenes = this.data.scenes;
            for (var i = 0; i < scenes.length; i++) {
                if (scenes[i].uid == id) return scenes[i];
            }
        },
        init: function () {
            this.domList.sceneViewer = App.Viewer.create(this.domList.viewer, { width: 960, height: 540 }, app.sm, "index", { })
        },
        btnClickHandler: function (ev) {
            var component = ev.detail.component;
            switch (component.dataset.action) {
                case "sure": 
                    app.currentPage.dispatchEvent("previewScene", {
                        scenes: [{
                            name: "testScene",
                            option: {},
                            widgets: [
                                {
                                    type: "column",
                                    style: {
                                        x: 100, y: 200, marker: "triangle", markerOffset: "0 -10", fill: "red"
                                    },
                                    mockData: [
                                        { value: 23, stroke: "black", rstart: 4, rend: 8 },
                                        { value: 18 },
                                        { value: 8 },
                                        { value: 35 }
                                    ],
                                    behaviors: [
                                        { type: "active", style: {} },
                                        { type: "remove", style: {} },
                                        {
                                            type: "pos",
                                            style: {
                                                xmin: -10, xmax: 10, xstep: 1, ymin: -10, ymax: 10, ystep: 1
                                            }
                                        },
                                        {
                                            type: "percentUp",
                                            style: {
                                                from: 0, to: 1, duration: 2000
                                            }
                                        }
                                    ]
                                },
                                {
                                    type: "image",
                                    style: {
                                        x: 100, y: 100, width: 50, height: 50, url: "asdfadf"
                                    },
                                    behaviors: [
                                        { type: "active", style: {} },
                                        { type: "remove", style: {} },
                                        {
                                            type: "pos",
                                            style: {
                                                xmin: -10, xmax: 10, xstep: 1, ymin: -10, ymax: 10, ystep: 1
                                            }
                                        }
                                    ]
                                }
                            ],
                            resources: {
                                images: {
                                    asdfadf: "/public/img/1.png"
                                }
                            },
                            marker: {
                                triangle: {
                                    type: "path",
                                    style: {
                                        path: "M -10 0 10 0 0 20 Z",
                                        fill: "red",
                                        stroke: "gray"
                                    }
                                }
                            }
                        }, {
                            name: "imgScene",
                            option: {},
                            widgets: [
                                {
                                    type: "image",
                                    style: {
                                        x: 200, y: 150, width: 50, height: 50, url: "asdfadf"
                                    },
                                    behaviors: [
                                        { type: "active", style: {} },
                                        { type: "remove", style: {} },
                                        {
                                            type: "pos",
                                            style: {
                                                xmin: -10, xmax: 10, xstep: 1, ymin: -10, ymax: 10, ystep: 1
                                            }
                                        }
                                    ]
                                }
                            ],
                            resources: {
                                images: {
                                    asdfadf: "/public/img/1.png"
                                }
                            },
                            marker: {}
                        }],
                        popup: this.parent
                    }); 
                    break;
                case "close": this.parent.hidden(); break;
            }
        },
        render: function (next) {
            this.data.scenes = this.parent.data.scenes;
            this.data.selectId = [];
            // this.data.scenes = [{
            //     title: "首屏",
            //     name: "index",
            //     url: "/public/img/1.png",
            //     description: "首屏默认视图"
            // },{
            //     title: "首屏",
            //     name: "index",
            //     url: "/public/img/1.png",
            //     description: "首屏默认视图"
            // },{
            //     title: "首屏",
            //     name: "index",
            //     url: "/public/img/1.png",
            //     description: "首屏默认视图"
            // },{
            //     title: "首屏",
            //     name: "index",
            //     url: "/public/img/1.png",
            //     description: "首屏默认视图"
            // },{
            //     title: "首屏",
            //     name: "index",
            //     url: "/public/img/1.png",
            //     description: "首屏默认视图"
            // },{
            //     title: "首屏",
            //     name: "index",
            //     url: "/public/img/1.png",
            //     description: "首屏默认视图"
            // },{
            //     title: "首屏",
            //     name: "index",
            //     url: "/public/img/1.png",
            //     description: "首屏默认视图"
            // },{
            //     title: "首屏",
            //     name: "index",
            //     url: "/public/img/1.png",
            //     description: "首屏默认视图"
            // },{
            //     title: "首屏",
            //     name: "index",
            //     url: "/public/img/1.png",
            //     description: "首屏默认视图"
            // },{
            //     title: "首屏",
            //     name: "index",
            //     url: "/public/img/1.png",
            //     description: "首屏默认视图"
            // },{
            //     title: "首屏",
            //     name: "index",
            //     url: "/public/img/1.png",
            //     description: "首屏默认视图"
            // },{
            //     title: "首屏",
            //     name: "index",
            //     url: "/public/img/1.png",
            //     description: "首屏默认视图"
            // },{
            //     title: "首屏",
            //     name: "index",
            //     url: "/public/img/1.png",
            //     description: "首屏默认视图"
            // },{
            //     title: "首屏",
            //     name: "index",
            //     url: "/public/img/1.png",
            //     description: "首屏默认视图"
            // }];
            this.fetch("./index.html", function (text) {
                next(this.renderHTML(text));
            })
        }
    });
})